{template 'header'}
<style type="text/css">
.today-starting-page .header-title {
    padding:14px 10px 14px 21px;
}
.today-starting-page .header-title::before {
    content:' ';
    position:absolute;
    width:7px;
    height:22px;
    background:-webkit-linear-gradient(#fe5064, #fe956f);
    top:15px;
    left:10px;
}
.today-starting-page .schedule {
    background:#fff;
    margin:0 10px 10px 10px;
    padding:20px 10px 30px 10px;
    border-radius:8px;
    box-shadow:0 4px 26px -12px #cccbcb;
}
.today-starting-page .schedule .cover {
    min-height:165px;
}
.today-starting-page .schedule .cover img {
    width:110px;
    object-fit:cover;
    box-shadow:0 1px 8px 1px #f0f0f0;
}
.today-starting-page .schedule .author {
    margin-bottom:25px;
    color:#a0a0a0;
}
.today-starting-page .schedule .title {
    margin-bottom:0px;
}
.today-starting-page .schedule .schedule-btn {
    width:91%;
    height:44px;
    border-radius:26px;
    color:#fff;
    font-size:20px;
    -webkit-letter-spacing:2px;
    -moz-letter-spacing:2px;
    -ms-letter-spacing:2px;
    letter-spacing:2px;
    font-weight:600;
    box-shadow:0 3px 22px -11px #ff001d;
}
.today-starting-page .record {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    height:75px;
    margin:10px;
    background-color:#fff;
    border-radius:6px;
    margin-top:12px;
    box-shadow:0 4px 26px -12px #cccbcb;
}
.today-starting-page .record .br {
    height:43px;
    width:0;
    border-left:1px solid #e0e0e0;
    margin-top:17px;
}
.today-starting-page .record .read-day, .today-starting-page .record .read-book {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    width:50%;
    height:100%;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    padding:0.17rem 0.2rem 0.17rem 0.23rem;
}
.today-starting-page .record .read-day .read-left, .today-starting-page .record .read-book .read-left {
    width:0.4rem;
}
.today-starting-page .record .read-day .read-left img, .today-starting-page .record .read-book .read-left img {
    width:0.4rem;
}
.today-starting-page .record .read-day .read-right, .today-starting-page .record .read-book .read-right {
    padding-left:10px;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
}
.today-starting-page .record .read-day .read-right p, .today-starting-page .record .read-book .read-right p {
    text-align:center;
}
.today-starting-page .record .read-day .read-right .record-txt, .today-starting-page .record .read-book .read-right .record-txt {
    font-size:0.2rem;
}
.today-starting-page .record .read-day .read-right .record-word, .today-starting-page .record .read-book .read-right .record-word {
    font-size:0.14rem;
}
.today-starting-page .group-block {
    position:fixed;
    height:64px;
    width:100%;
    background-color:#fff;
    box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.04);
    padding:0 12px;
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
    max-width:480px;
}
.today-starting-page .group-block img {
    width:40px;
    height:40px;
    margin-right:12px;
}
.today-starting-page .group-block .group-join-btn {
    width:84px;
    height:30px;
    line-height:30px;
    font-size:0.14rem;
    position:absolute;
    right:12px;
    top:50%;
    margin-top:-15px;
}
</style>
        <div class="today-starting-page">
            <div class="schedule-wrap">
                <div class="header-title g-letter-spacing g-font-16 g-rlt">成功男人必学的10本情商书</div>
                <div class="schedule g-text-center">
                    <div class="day-num g-color-grey g-margin-b-15 g-font-16"><span>第1天</span>
                    </div>
                    <div class="cover g-margin-b anm-fade-in">
                        <img src="https://daka666-1253442168.file.myqcloud.com/college_pro_media/bcover/152_677ed9b033.png" alt="">
                    </div>
                    <div class="title g-font-18">好好说话2 第一讲</div>
                    <div class="author"> <span>导师：</span><span>马薇薇；黄执中；周玄毅；邱晨；胡渐彪</span>
                    </div>
                    <button class="schedule-btn g-main-bg">开始学习</button>
                </div>
                <div class="g-flex col-center group-block" style="top: -64px;">
                    <img src="https://staticqc.xiaoxiafm.com/image/group-pic.f6877e78519e47f5f01693259862dea1.png">
                    <div>
                        <p>加入班级群</p>
                        <p>与老师同学交流学习</p>
                    </div>
                    <button class="g-button g-animation-breathe group-join-btn">立即进群</button>
                </div>
                <div class="g-flex col-center group-block row-between" style="top: -40px; height: 40px; color: rgb(255, 255, 255); background-color: rgb(247, 183, 76);">
                    <div>未成功进群的同学,可<span style="border-bottom: 1px solid rgb(255, 255, 255);">点此处联系老师</span>
                    </div>
                    <div style="font-size: 0.12rem; color: rgb(255, 255, 255); border: 1px solid rgb(238, 238, 238); border-radius: 4px; padding: 2px 4px;">关闭</div>
                </div>
            </div>
            <div class="g-card">
                <div class="" style="display: none;">
                    <div class="g-card-mask"></div>
                    <div class="g-fixed-center g-card-main g-text-center">
                        <p class="g-card-word">长按保存图片，可分享给好友</p>
                        <div>
                            <img class="g-card-img" src="">
                        </div>
                        <img src="https://staticqc.xiaoxiafm.com/image/close.280c958f33c14a9ddd75cb78995053c5.png" class="g-card-close">
                    </div>
                </div>
            </div>
            <div class="g-card">
                <div class="" style="display: none;">
                    <div class="g-card-mask"></div>
                    <div class="g-fixed-center g-card-main g-text-center">
                        <div>
                            <img class="g-card-img" src="https://staticqc.xiaoxiafm.com/image/before-graduate.020b3971a1564a73defe39041d267a3f.png">
                        </div>
                        <img src="https://staticqc.xiaoxiafm.com/image/close.280c958f33c14a9ddd75cb78995053c5.png" class="g-card-close">
                    </div>
                </div>
            </div>
            <div class="g-modal  g-hidden">
                <div class="g-mask"></div>
                <div class="dialog">
                    <div class="content">
                        <div class="modal-body">
                            <p style="font-size: 0.15rem;">前往打卡，分享至朋友圈</p>
                            <p style="font-size: 0.15rem; padding-top: 0.05rem;">可获得1学分</p>
                        </div>
                    </div>
                    <div class="g-modal-footer"><a class="g-modal-btn grey" href="javascript:;">取消</a><a class="g-modal-btn active" href="javascript:;">立即打卡</a>
                    </div>
                </div>
            </div>
            <div class="g-modal  ">
                <div class="g-mask"></div>
                <div class="dialog">
                    <div class="content">
                        <div class="modal-body" style="padding: 51% 0px 0px; color: rgb(151, 151, 151); font-size: 0.14rem;">
                            <img src="https://staticqc.xiaoxiafm.com/image/guide-refund-dialog.a0474987f38a86fdf59231023367ea45.jpg" style="width: 100%; position: absolute; top: 0px; left: 0px;">
                            <p style="margin-top: 0.15rem;">继续努力</p>
                            <p>后面还有更多惊喜等着你</p>
                        </div>
                    </div>
                    <div class="g-modal-footer"><a class="g-modal-btn grey" href="javascript:;">咨询退款</a><a class="g-modal-btn active" href="javascript:;">继续学习</a>
                    </div>
                </div>
            </div>
            <div class="" style="display: none;">
                <div class="g-code-dialog-mask" style="z-index: 2;">
                    <div>
                        <img src="https://daka666-1253442168.file.myqcloud.com/college_pro_media/tool/files/20190304_141720_WechatIMG15.jpeg">
                        <div>
                            <p>长按识别，添加老师微信</p>
                            <p style="color: rgb(254, 81, 100);">添加时务必备注购买的商品名称</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
{template 'footer'}